<!DOCTYPE html>
<html style="font-size: 23.4375px;">
<head>
    <include file="./public/header.html"/>
    <style>
        .nbc{background:#2e4158; color:#fff;}
    </style>
</head>
<body style="font-size: 21.7589px;">
<div id="app">
    <div id="shadow" style="display: none;"></div>
    <header class="top"><span style="display: none;">加载中...</span> <span>绑定密保手机</span> <!---->
        <div class="iconfont back" style="display: none;"></div>
        <a href="{:U('Users/personalInfo')}" class="iconfont back"></a>
    </header>

    <form action="{:U('Users/setMobile')}" method="get" id="form">
        <input type="hidden" name="id" id="uid" value="{$id}">
    <div data-v-41d3f30d="" class="main" s="[object Object]">
        <table data-v-41d3f30d="">
            <tbody data-v-41d3f30d="">
            <tr data-v-41d3f30d="">
                <td data-v-41d3f30d="">手机号</td>
                <td data-v-41d3f30d="">
                    <input data-v-41d3f30d="" id="mobile" type="tel" tag="手机号" placeholder="请输入您要绑定的手机号码"value="" class="va76" name="Mobile">
                </td>
            </tr>
            <tr data-v-41d3f30d="">
                <td data-v-41d3f30d="">验证码</td>
                <td data-v-41d3f30d="">
                    <input data-v-41d3f30d="" type="email"  id="yzm" tag="验证码" placeholder="输入验证码" class="va76" name="SmsCode">
                    <div data-v-41d3f30d="" class="tableBTN">
                        <span data-v-41d3f30d="" class="sendCode  nbc nbc2" onclick="examine()">发送验证码</span>
                    </div>
                </td>
            </tr>
            <tr data-v-41d3f30d=""></tr>
            </tbody>
        </table>
        <div data-v-41d3f30d="" class="loginBtn BTN"><a data-v-41d3f30d="" onclick="sav()">确定</a></div>
    </div>
    </form>
    <div id="shouji1" class="layermbox layermbox0 layermshow" index="21" style="display: none;">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">手机号不能为空</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="shouji2" class="layermbox layermbox0 layermshow" index="21" style="display: none;">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">手机号码格式有误，请重新输入!</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="yanzhengma1" class="layermbox layermbox0 layermshow" index="21" style="display: none;">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">验证码不能为空</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="fasong" class="layermbox layermbox0 layermshow" index="21" style="display: none;">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">发送成功，请注意查收</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="shibai" class="layermbox layermbox0 layermshow" index="21" style="display: none;">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">发送失败</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(".layermbtn").click(function(){
        $(this).parents(".layermbox").hide();
    })

    function sav(){
        var id = $("#uid").val();
        var mobile = $("#mobile").val();
        var yzm = $("#yzm").val();
        if(mobile == ''){
            $("#shouji1").show();
            return;
        }
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))){
            $("#shouji2").show();
            return;
        }
        if(yzm == ''){
            $("#yanzhengma1").show();
            return;
        }

        $.ajax({
            type: "POST",
            url: "{:U('Users/setMobile')}",
            data: {'yzm':yzm,'mobile':mobile,'id':id},
            success: function(dat){
                if(dat==1){
                    window.location.href="{:U('Users/securityCenter')}";
                }else{
                    $(".yz2").html("<font color='red'>验证码错误，请重新输入</font>");
                }
            }
        });
    }



    function examine(){
        var mobile = $("#mobile").val();
        if(mobile == ''){
            $("#shouji1").show();
            return;
        }

        $.ajax({
            type:"post",
            url:"{:U('Users/examine_message')}",
            data:{'mobile':mobile},
            dataType:"json",
            success:function(msg){
                if(msg==1){
                    $("#fasong").show();
                    var t = 60;
                    $(".nbc2").html(t+" s");
                    var timer = setInterval(function(){
                        t--;
                        $(".nbc2").html(t+" s");
                        if(t <= 0){
                            clearInterval(timer);
                            $(".nbc2").addClass("nbc");
                            $(".nbc2").html("发送验证码");
                        }
                    },1000);
                    $(".nbc2").removeClass("nbc");
                }else{
                    $("#shibai").show();
                }
            }
        })
    }
</script>